<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="IsAll" >
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
     @keydown.enter="addFn"
   v-model.trim="task" 
      autofocus
    />
  </header>
</template>

<script>
export default {
props:{
  list:{
    type:Array,
    required:true
  }
},
data(){
  return{
    task:''
  }
},
methods:{
  addFn(){
    //触发父组件增加事件
    this.$emit('add',this.task)
    this.task='' //添加后清除
  }
},
computed:{
  IsAll:{
    get(){
      // list 中isDone全部为true，才能为true 否则是false
      return this.list.every(item=>item.isDone)
    },
    set(val){
      this.$emit('checkAll',val)

    }
  }
}
}
</script>